<template>
	<view>
		<!-- <navbar :isHome="true" /> -->
		<view style="margin-top:130rpx;">
			<view class="weui-cell" style="background: #fff9eb;">
				<view class="weui-cell_hd">
					<image src="/static/resource/images/ic_myapp.png" mode=""
						style="display: block;width: 40rpx;height: 40rpx;margin-right:14rpx"></image>
				</view>
				<view class="weui-cell_bd">
					<text style="color: #be9719;font-size: 26rpx;">这里可以发布通知公告！这里可以发布通知公告！</text>
				</view>
				<view class="weui-cell_ft">
					<image src="/static/resource/images//modal_closer.png"
						style="display: block;width: 30rpx;height: 30rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="slides && slides.length > 0" class="index-swiper">
			<swiper autoplay circular :interval="4000" :duration="500">
				<template v-for="(item,index) in slides" :key="index">
					<swiper-item>
						<image :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress :data-index="index">
						</image>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<view v-if="nav2s && nav2s.length > 0" class="nav2-list">
			<template v-for="(item,index) in nav2s" :key="index">
				<view class="nav2-item" @click="onNav2Tap" :data-index="index">
					<view class="nav2-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>
			</template>
		</view>
		<view v-if="navs && navs.length > 0" class="nav-list">
			<template v-for="(item,index) in navs" :key="index">
				<view class="nav-item" @click="onNavTap" :data-index="index">
					<view class="nav-pic">
						<image :src="item.pic_image_url"></image>
					</view>
					<view class="nav-text" :style="'color:'+ (item.tcolor ? item.tcolor : '')">{{item.name}}</view>
				</view>
			</template>
		</view>
		<!-- <view class="index-swiper" style="position: fixed; bottom: 50px; left: 0; width: 100%; z-index: 1;">
			<image src="/static/images/home/foot1.png" mode="widthFix" style="width: 95vw; margin-bottom: 10px;"
				show-menu-by-longpress></image>
		</view> -->

		<!-- 进行中的服务 -->
		<uni-section class="mb-10" title="当前进行中的服务" sub-title="" type="line"> <!-- </uni-section> -->

		</uni-section>
		<block v-if="list2 != null">
			<view v-if="list2 != null && list2.length == 0"
				style="padding: 40rpx 40rpx 40rpx 40rpx; text-align: center">
				<image src="/static/resource/images/empty.png" mode="widthFix" style="width: 200rpx" />
				<view class="f5">暂时还没进行中的服务噢~快去接单吧</view>
			</view>
			<view v-else class="od-list">
				<block v-for="(item, index) in list2" :key="index">
					<view class="od-item" :data-id="item.out_trade_no">
						<view class="weui-cell weui-cell_access">
							<view class="weui-cell__hd">
								<view>
									<!-- 订单图片 -->
									<image src="/static/images/home/accompany3.png" class="od-logo"
										style="width: 200rpx; height: 200rpx; margin-right: 20rpx" />
								</view>
							</view>
							<view class="weui-cell__bd">
								<view>
									<text style="font-weight: bold">{{ item.address}}</text>
								</view>
								<view class="od-info">
									<view>

										<view>
											预约时间：
											<text>{{ item.createTime }}</text>

										</view>
										<view>
											就诊人员：
											<text>{{ item.username }}</text>
										</view>
									</view>

									<view>
										<view>
											联系电话：
											<text>{{ item.phone }}</text>

										</view>

										<view>服务金额：
											<text>{{item.amount}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="weui-cell__ft">
								<!-- 待付款 -->
								<block v-if="item.trade_state == '待支付'">
									<view style="color: #ffa200"><text>待支付</text></view>
									<view style="color: #ffa200">
										<counter style="font-size: 24rpx" :second="item._exp_time"
											@counterOver="onCounterOver" />
									</view>
								</block>
								<!-- 进行中 -->
								<block v-if="item.trade_state == '待服务'">
									<view style="color: #1da6fd"><text>待服务</text></view>
								</block>
								<!-- 已完成 -->
								<block v-if="item.trade_state == '已完成'">
									<view style="color: #21c521"><text>已完成</text></view>
								</block>
								<!-- 已取消 -->
								<block v-if="item.trade_state == '已取消'">
									<view style="color: #999999"><text>已取消</text></view>
								</block>

							</view>
						</view>
						<view class="od-item1">
							<button class="but1" v-if="item.status == '3'" @tap="changeStatus2(item.id)">查看进度</button>
							<button class="but1" @tap="toOrder(item.orderNumber)">订单详情</button>
							<!-- <button class="but1" @tap="changeStatus()">立即接单</button> -->
						</view>
					</view>

				</block>
			</view>

		</block>

	</view>
</template>

<script>
	import {
		ref,
		toRaw
	} from 'vue';

	export default {
		data() {
			return {
				list2: null, // 订单列表数据
				slides: [{
						pic_image_url: '/static/images/home/banner1.png'
					},
					{
						pic_image_url: '/static/images/home/banner2.png'
					},
					// 其他图片对象
				],
				nav2s: [{
						pic_image_url: '/static/images/home/class5.png',
						name: '就医陪诊',
						num: '1',
					},
					{
						pic_image_url: '/static/images/home/class6.png',
						name: '院内陪护',
						num: '2',
					},
				],
				navs: [{
						pic_image_url: '/static/images/home/1.png',
						tcolor: '#535353',
						name: '尊享服务',
						num: '3',
					},
					{
						pic_image_url: '/static/images/home/2.png',
						tcolor: '#535353',
						name: '代办问诊',
						num: '4',
					},
					{
						pic_image_url: '/static/images/home/3.png',
						tcolor: '#535353',
						name: '送取结果',
						num: '5',
					},
					{
						pic_image_url: '/static/images/home/4.png',
						tcolor: '#535353',
						name: '自选服务',
						num: '6',
					},
				]
			};
		},
		onShow(options) {
			this.loadList2()
		},

		methods: {
			changeStatus2(id) {
				uni.navigateTo({
					url: `/pages/order/jindu?id=${id}`
				});

			},
			toOrder(orderNumber) {
				uni.navigateTo({
					url: `/pages/order/order-details?orderNumber=${orderNumber}`
				});
			},

			loadList2() {
				uni.request({
					url: "http://localhost:8080/api/order/orderList",
					method: 'GET',
					data: {
						status: 3,
					},
					success: res => {
						this.list2 = res.data.data;
					},
					fail: res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},

			onNav2Tap(e) {
				const nav = toRaw(this.nav2s)[e.currentTarget.dataset.index];
				this.jump(nav);
			},
			onNavTap(e) {
				const nav = toRaw(this.navs)[e.currentTarget.dataset.index];
				this.jump(nav);
			},
			jump(nav) {
				const num = nav.num;
				const name = nav.name;
				uni.navigateTo({
					url: `/pages/index/service/index?num=${num}&name=${name}`
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.index-swiper {
		padding: 20rpx 20rpx 0 20rpx;
		overflow: hidden;
	}

	.index-swiper swiper {
		height: 320rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.index-swiper swiper-item image {
		width: 100%;
		height: 100%;
	}

	.nav2-list {
		margin: 10rpx 20rpx 0 20rpx;
	}

	.nav2-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav2-item {
		float: left;
		margin-top: 20rpx;
		width: 50%;
		text-align: center;
		box-sizing: border-box;
		padding: 0 5rpx;
	}

	.nav2-pic {
		width: 100%;
	}

	.nav2-pic image {
		display: block;
		width: 100%;
	}

	.nav-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav-item {
		float: left;
		margin-top: 20rpx;
		width: 25%;
		text-align: center;
		padding: 10rpx 0;
	}

	.nav-pic image {
		display: block;
		margin: 0 auto;
		width: 110rpx;
		height: 110rpx;
	}

	.nav-text {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
	}

	.hosp-list {
		margin: 10rpx 0 0 0;
		background: none;
	}

	.hosp-list::before {
		display: none;
	}

	.hosp-list::after {
		display: none;
	}

	.hosp-item {
		-webkit-box-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
	}

	.hosp-item::before {
		display: none;
	}

	.hosp-item::after {
		display: none;
	}

	.hosp-name {
		font-weight: bold;
		font-size: 34rpx;
	}

	.hosp-avatar {
		display: block;
		width: 200rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.hosp-line {
		margin-top: 5rpx;
	}

	.hosp-line text {
		font-size: 26rpx;
	}

	.hosp-rank {
		font-weight: bold;
		color: #0bb585;
		margin-right: 15rpx;
	}

	.hosp-label {
		font-weight: bold;
		color: #0ca7ae;
		margin-right: 15rpx;
	}

	.hosp-intro {
		color: #999999;
	}

	.home {
		padding-top: calc(0rpx + constant(safe-area-inset-top));
		padding-top: calc(0rpx + env(safe-area-inset-top));

		.header {
			background: linear-gradient(130deg, #3d445f 0%, #202740 100%);
			padding: 0rpx 26rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.head_image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
				}

				&-city {
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					display: flex;
					align-items: center;
				}

				&-tabs {
					display: flex;
					align-items: center;

					&__li {
						width: 128rpx;
						text-align: center;
						font-size: 32rpx;
						font-weight: 400;
						color: #ffffff;
						margin: 0 28rpx;
						position: relative;

						&.ac {
							&::after {
								content: "";
								width: 30rpx;
								height: 6rpx;
								background: #11c3a9;
								border-radius: 40rpx;
								position: absolute;
								bottom: -20rpx;
								left: 0;
								right: 0;
								margin: auto;
							}
						}
					}
				}
			}

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 90rpx;
				padding-bottom: 70rpx;

				&-li {
					text-align: center;

					&__val {
						font-size: 40rpx;
						font-weight: 500;
						color: #ffffff;
					}

					&__label {
						font-size: 28rpx;
						font-weight: 400;
						color: #939bb1;
						margin-top: 28rpx;
					}
				}
			}
		}

		.mask {
			background: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 42rpx;
			margin-top: -30rpx;
		}

		.banner {
			width: 692rpx;
			height: 324rpx;
			border-radius: 20rpx;
			margin: auto;

			&-li {
				width: 100%;
				height: 100%;

				&__img {
					width: 692rpx;
					height: 324rpx;
					border-radius: 20rpx;
				}
			}
		}

		.nav {
			margin-top: 50rpx;

			&-li {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&__img {
					width: 62rpx;
					height: 62rpx;
					display: block;
					margin-bottom: 16rpx;
				}
			}
		}

		.taking {
			width: 136rpx;
			height: 136rpx;
			border-radius: 50%;
			background: linear-gradient(134deg, #2b3043 0%, #555a75 73%);
			box-shadow: 0rpx 6rpx 8rpx 0rpx #b4bbde;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 136rpx;
			margin: auto;

			&.ac {
				background: linear-gradient(134deg, #06b7b7 0%, #1fd296 73%);
				box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(11, 152, 107, 0.23);
			}
		}
	}

	page {
		background: #f4f4f4;
	}

	.od-item {
		margin: 20rpx;
		background: #ffffff;
		border: 1rpx solid #eeeeee;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.od-item .weui-cell {
		padding: 30rpx;
		-webkit-box-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	.od-logo {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.od-info view {
		font-size: 24rpx;
		color: #999999;
	}

	.od-info text {
		font-size: 24rpx;
		color: #999999;
	}

	.od-item .weui-cell__ft text {
		font-size: 24rpx;
	}

	.od-item1 {
		display: flex;
		/* 使用 flex 布局 */
		flex: 4;
		align-items: center;
		/* 垂直居中对齐子元素 */
		margin-bottom: 20rpx;
		background: #ffffff;
		border: 0rpx solid #eeeeee;
		border-radius: 10rpx;
		overflow: hidden;
		justify-content: flex-end;
		/* 将子元素靠右对齐 */
		height: 80rpx;
	}

	.but1 {
		border-radius: 40rpx;
		margin-left: unset;
		border: 1px solid #dcdcdc;
		font-size: 24rpx;
		margin-right: 10rpx;
		/* 设置按钮之间的右边距为 10rpx */
	}

	.mb-10 {
		margin-bottom: 1px;
		margin-top: 25rpx;
	}

	.uni-section {
		font-size: 200px;
		/* 调整为您希望的字体大小，比如20px */
	}

	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}

	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 35rpx;
		color: #ffffff;
		flex: 1;

	}
</style>